<template>
    <PageTabelLayout>
        <template #pageHeader>
            <div class="my-header" v-if="headerShow">
                <div class="search-form" style="padding: 10px;box-sizing: border-box;">  
                    <a-form size="small" :model="searchData" auto-label-width layout="inline">
                        
                              
                                <a-form-item label="开单日期" label-col-flex="80px" :style="{width:'450px'}">
                                    <a-range-picker  popup-container="html"  showTime  class="bacClass" @change="changePicker" />
                                </a-form-item>
                            
                             
                                <a-form-item label="流转卡号" label-col-flex="80px" :style="{width:'320px'}">
                                    <a-input placeholder="输入流转卡号"  allow-clear  class="bacClass" v-model="searchData.circulatCard"/> 
                                </a-form-item>
                            
                             
                                <a-form-item label="记录单号" label-col-flex="80px" :style="{width:'320px'}">
                                    <a-input placeholder="输入记录单号"  allow-clear   class="bacClass" v-model="searchData.verifyManageCode"/> 
                                </a-form-item>  
                    </a-form>    
                </div>
            </div>
            <div class="my-divisders">
                <a-divider orientation="center">
                    <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                    <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
                </a-divider>
            </div> 
            <div class="my-tool-bar" style="padding:0px 10px 10px 0px;box-sizing: border-box;">
                <Toolbar
                    :items="['查询', '导出']"
                    @select="selectHandler"
                    @export="exportHandler"/>
            </div>
        </template>
        <template #pageTabel>
              <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady" 
                    style="height:100%" class='ag-theme-alpine'
                    :defaultColDef="defaultColDef" :rowData="table.dataList" 
                    :columnDefs="cfsValue" :localeText="localeTextData"/>
        </template>
        <paginationCopys :total="total" show-total show-jumper 
                show-page-size @change="changePage"    
                @page-size-change="changeSize" 
                style="justify-content: center;margin-top: 10px;"     
                :page-size="pagination.pageSize" :current="pagination.page" />
    </PageTabelLayout>
    
</template>

<script lang="ts">
import { reactive, ref,onMounted } from 'vue'
import { useTable, useRowKey, usePagination, useRowSelection } from '@/hooks/table'
import { orderFn as labOtherFn } from '@/api/laboratory/other'
import Message from '@arco-design/web-vue/es/message'
import PageTabelLayout from '@/components/pageTabelLayout.vue'

import { localeText } from '@/api/aggridZw'
import emitter from "@/hooks/useEventBus";
import { assTable } from '@/utils/assemblyLevelTable'
import { verifyPush } from '@/api/PhysicalSurveyRoom/physicalTestApi'
export default {
    name: "phyPushedInfoQuery",
    setup() {
        let headerShow = ref<boolean>(true);
        let pushInfoApi = verifyPush();
        onMounted(() => { 
            // 第一个页面需要在刚进入就调用一次  切换tap时也需要调用
            selectHandler();
            emitter.on("refresh-phyPushedInfoQuery", () => {
                selectHandler();
            });
        });
        const selectHandler = () => {
            pagination.page = 1;
            doRefresh();
         };
        const exportHandler = () => { 
            let selectList = gridOption.value.getSelectedRows();
            if (selectList.length === 0) {
                Message.error('请勾选需要导出的数据')
                return
            } else {
                let nowRow = table.dataList.filter(function (o) {
                    return (gridOption.value.getSelectedRows().map((o: any) => { return o.id })).indexOf(o["id"]) !== -1;
                })
                assTable(cfsValue,nowRow,'物测已推送信息查询');
            }
        };
        const searchData:any = reactive({
            beginDate:'',
            endDate:'',
            circulatCard:'',
            verifyManageCode:'',
            pushState:1,
        });
        const changePicker = (date:any) => {
            searchData.beginDate = date ? date[0] : ''; 
            searchData.endDate = date ? date[1] : '';
        }
        const doRefresh = async () => { 
               let {data,code}:any = await pushInfoApi.getVerifyPushList({page:pagination.page,size:pagination.pageSize,...searchData});
               if(code === 200){
                    // console.log(res.data); 
                     table.handleSuccess(data.list);
                     gridOption.value.setRowData(data.list);
                     total.value = data.total;
               }else{
                   Message.error('数据查询失败')
               }
        };
        const scrollbar = ref(true);
        const pageData = reactive<{
            circulDropList: any[];
        }>({
            circulDropList: [],
        });
        const pagination = usePagination(doRefresh);
        const { selectedRowKeys } = useRowSelection();
        const table = useTable();
        const rowKey = useRowKey("id");
        //表格方面
        const gridOption = ref();
        const gridReady = (params:any) => {
          gridOption.value = params.api;
          //调整表格自适应大小
        //   gridOption.value.sizeColumnsToFit(); 
        }
        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
            width: 150
            // flex: 1
        }
        let cfsValue:any[] = [
            // {
            //     headerName: "序号",
            //     field: "serialNo",
            // },
            {
                headerName: "推送时间",
                field: "pushDate",
            },
            {
                headerName: "推送人",
                field: "pusher",
            },
            {
                headerName: "推送部门",
                field: "pushDepartment",
            },
            {
                headerName: "开单日期",
                field: "verifyManageDate",
            },
            {
                headerName: "流转卡号",
                field: "circulatCard",
            },
            {
                headerName: "记录单号",
                field: "verifyManageCode",
            },
            {
                headerName: "计划单号",
                field: "planCode",
            },
            {
                headerName: "客户名称",
                field: "customName",
            },
            {
                headerName: "布号",
                field: "clothCode",
            },
            {
                headerName: "品名",
                field: "brandName",
            },
            {
                headerName: "纱支",
                field: "yarnCount",
            },
            {
                headerName: "色号",
                field: "colorCode",
            },
            {
                headerName: "色称",
                field: "colorName",
            },
            {
                headerName: "设备编号",
                field: "deviceCode",
            },
            // {
            //     headerName: "缸型",
            //     field: "serialNo",
            // },
            {
                headerName: "重量",
                field: "weight",
            },
            {
                headerName: "匹数",
                field: "pieceNum",
            },
            {
                headerName: "测试标准",
                field: "verifyStandard",
            },
            {
                headerName: "结果",
                field: "verifyResult",
            },
            {
                headerName: "备注",
                field: "remark",
            },
            {
                headerName: "要求",
                children: [
                    {
                        headerName: "克重",
                        field: "requireWeight",
    
                    },
                    {
                        headerName: "门幅",
                        field: "requireWidth",
    
                    },
                ]
            },
            {
                headerName: "实测",
                children: [
                    {
                        headerName: "克重",
                        field: "measuredWeight",
    
                    },
                    {
                        headerName: "门幅",
                        field: "measuredWidth",
    
                    },
                    // {
                    //     headerName: "米长",
                    //     field: "depart",
    
                    // },
                ]
            },
            {
                headerName: "缩水率",
                children: [
                    {
                        headerName: "直%",
                        field: "straightHangDry",
    
                    },
                    {
                        headerName: "横%",
                        field: "abscissHangDry",
    
                    },
                ]
            },
            // {
            //     headerName: "PH值",
            //     field: "depart",
            // },
            // {
            //     headerName: "皂洗程度",
            //     field: "depart",
            // },
            {
                headerName: "扭度",
                field: "torsionHangDry",
            },
            {
                headerName: "审核状态",
                field: "auditState",
            },
        ];  
        let a = [{
            showRowGroup: 'hide_def',
            "headerName": "",
            "checkboxSelection": true,
            "headerCheckboxSelection": true,
            "pinned": "left",
            "width": 50,
            resizable: false,
            filter: false,
            sortable: false,
            minWidth: 50,
            maxWidth: 50,
            lockPosition: "left",
        }]
        cfsValue = a.concat(cfsValue);
        const total = ref(10);
        const changePage = (val:any) => {
            pagination.page = val
            doRefresh();
        }
        const changeSize = (val:any) => {
            pagination.pageSize = val
            doRefresh();
        }

        const localeTextData :any = ref(localeText);
        return {
            selectHandler,
            exportHandler,
            searchData,
            scrollbar,
            pagination,
            selectedRowKeys,
            table,
            rowKey,
            pageData,
            headerShow,
            changePage,
            changeSize,
            localeTextData,
            defaultColDef,
            gridReady,
            cfsValue,
            total,
            changePicker
        };
    },
    components: { PageTabelLayout, }
}
</script>

<style scoped>
.bacClass{
  width: 270px;background: #fff;border: 1px solid #c9cdd3;
}
:deep(.arco-picker input){
    padding-left: 0 !important;
}
:deep(.arco-picker){
    padding-left: 0 !important;
}
:deep(.arco-picker-separator){
    padding: 0 !important;
}
</style>